<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        class="Aside"
        :width="isFold_main ? '210px' : '80px'"
        height="100%"
      >
        <NavMenu :isFold_main="isFold_main" />
      </el-aside>
      <el-container>
        <el-header class="elHeader">
          <NavHeader @FoldMenu="HandleFoldChange" />
        </el-header>
        <el-main>
          <div class="Main">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import NavMenu from "@/components/nav-menu";
import NavHeader from "@/components/nav-header";
import { defineComponent, ref } from "@vue/runtime-core";
export default defineComponent({
  components: { NavMenu, NavHeader },
  setup() {
    //使用 isFold_main 来控制菜单栏的伸缩，通过 @FoldMenu 来接收子组件传递来的值
    const isFold_main = ref(true);
    const HandleFoldChange = (isFold: boolean) => {
      //将子组件的值，赋给定义好的  isFold_main
      // 然后将值 通过 props 传递给子组件 menu
      isFold_main.value = isFold;
      // console.log(isFold_main.value);
    };
    return {
      isFold_main,
      HandleFoldChange,
    };
  },
});
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  background: url("../../assets/img/IMG_2859.JPG") no-repeat;
  background-size: 100% 100%;
  .el-container {
    height: 100%;
  }
  .Aside {
    background-color: #0c2136;
  }
}
</style>
